<template>
  <n-grid x-gap="10" y-gap="10" :col="24">
    <n-gi span="6">
      <div class="custom-choose-item">
        <n-icon size="20">
          <AddOutline />
        </n-icon>
      </div>
    </n-gi>
    <n-gi span="6" v-for="brand in brands" :key="brand.id">
      <div
        class="custom-choose-item flex items-center justify-center"
        @click.stop="handleSelectBrand(brand)"
      >
        <div class="image">
          <n-image
            preview-disabled
            width="56"
            height="56"
            :src="brand.image"
            fallback-src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
          />
        </div>
        <div class="title">
          <span> {{ brand.name }} </span>
        </div>
      </div>
    </n-gi>
  </n-grid>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { AddOutline } from "@vicons/ionicons5";
import { get, debounce } from "lodash-es";
import { getBrands } from "@/api/product/brand.api";
import { Brand } from "@/types/model/product/vos/brand.vo";

const emits = defineEmits(["selected"]);

const initLoading = ref<boolean>(true);
const brands = ref<Brand[]>([]);

const handleGetAllBrands = async () => {
  initLoading.value = true;
  try {
    const res = await getBrands({
      page: 1,
      pageSize: 1000,
      status: "1",
    });
    brands.value = get(res, "result.records") || [];
  } finally {
    initLoading.value = false;
  }
};

const handleSelectBrand = debounce(function (payload: Brand) {
  console.log(payload);
  emits("selected", payload);
}, 200);

onMounted(() => {
  handleGetAllBrands();
});
</script>
